<template>
    <div>
        <div class="pageHeader">
            <div class="pageNameBox" @click="$router.back(-1)">
                <img src="@/assets/image/menuBar/fh.png" alt="" />
                <div class="pageName">项目详情</div>
            </div>
            <div class="pageStatistics">共{{ pageData.totalNum }}条任务</div>
        </div>
        <div class="detailsBox">
            <div class="detailsTitle">
                <div class="detailsText">完成任务</div>
                <el-button type="primary" @click="openMask">新增任务</el-button>
            </div>
            <el-table :data="pageData.items" style="width: 100%" header-row-class-name="elTableStyle">
                <el-table-column prop="planName" label="任务名称"> </el-table-column>
                <el-table-column label="所属项目">
                    <template slot-scope="scope">
                        {{ filterProjectName(scope.row.projectId) }}
                    </template>
                </el-table-column>
                <el-table-column prop="planPriority" label="优先级">
                    <template slot-scope="scope">
                        {{ scope.row.planPriority == 'HIGHPRIORITY' ? '高' : scope.row.planPriority == 'MEDIUMPRIORITY' ? '中' : '低' }}
                    </template>
                </el-table-column>
                <el-table-column prop="principal" label="责任人"> </el-table-column>
                <el-table-column prop="planType" label="任务类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.planType == 'TESTTASK'">测试</span>
                        <span v-if="scope.row.planType == 'DEMANDTASK'">需求</span>
                        <span v-if="scope.row.planType == 'COTASK'">协办</span>
                        <span v-if="scope.row.planType == 'BUGTASK'">BUG</span>
                    </template>
                </el-table-column>
                <el-table-column prop="releaseDate" label="下达日期" width="100"> </el-table-column>
                <el-table-column prop="expectFinishDate" label="计划完成日期">
                    <template slot-scope="scope">
                        <div style="width: 80px; position: relative; left: 50%; transform: translateX(-50%)">{{ scope.row.expectFinishDate }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="finishTime" label="完成日期" width="100"> </el-table-column>
                <el-table-column prop="delayDays" label="逾期时间"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text">操作</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagination>
        </div>
        <!-- mask -->
        <el-dialog title="新增任务" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="form" label-width="110px">
                    <el-form-item label="所属项目">
                        <el-select v-model="form.projectId" placeholder="所属项目" disabled class="formSelectBox">
                            <el-option v-for="item in porjectData" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="需求名称">
                        <el-input v-model="form.planName" placeholder="请输入需求名称"></el-input>
                    </el-form-item>
                    <el-form-item label="任务负责人">
                        <el-select v-model="form.principalId" placeholder="请选择负责人" class="formSelectBox">
                            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id" :disabled="jurisdiction(item)"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预计完成时间">
                        <el-date-picker v-model="form.expectFinishDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="formSelectBox"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="需求类型">
                        <el-radio-group v-model="form.planType" class="formSelectBox">
                            <el-radio label="BUGTASK">BUG</el-radio>
                            <el-radio label="TESTTASK">测试</el-radio>
                            <el-radio label="DEMANDTASK">需求</el-radio>
                            <el-radio label="COTASK">协办</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="优先级">
                        <el-radio-group v-model="form.planPriority">
                            <el-radio label="HIGHPRIORITY">高优先</el-radio>
                            <el-radio label="MEDIUMPRIORITY">中优先</el-radio>
                            <el-radio label="LOWPRIORITY">低优先</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="需求描述">
                        <el-input type="textarea" :rows="6" resize="none" v-model="form.planContent"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="createTask">立即创建</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
export default {
    components: {},
    data() {
        return {
            tableData: [{}, {}],
            dialogVisible: false,
            queryData: {
                page: 1,
                pageSize: (this as any).$setTing.paging.pageSize,
                projectId: ''
            },
            pageData: '',
            porjectData: '',
            form: {
                projectId: '', // 项目名称
                planName: '', // 需求（任务）名称
                principalId: '', // 负责人id
                expectFinishDate: '', // 预期完成时间
                planType: '', // 任务类型
                planPriority: '', // 任务优先级
                planContent: '' // 需求描述
            },
            userList: [],
            loginMsg: ''
        }
    },
    mounted() {
        ;(this as any).form.projectId = (this as any).$route.params.id
        ;(this as any).queryData.projectId = (this as any).$route.params.id
        ;(this as any).loginMsg = JSON.parse((sessionStorage as any).getItem('loginMsg'))
        ;(this as any).queryPorjectList()
        ;(this as any).getUserList()
    },
    computed: {
        filterProjectName() {
            return (id: string) => {
                let names = (this as any).porjectData.filter((item: any) => {
                    if (item.projectId === id) {
                        return item
                    }
                })
                return names[0].projectName
            }
        },
        jurisdiction() {
            return (item: any) => {
                if ((this as any).loginMsg.permission == '1') {
                    return false
                } else {
                    if ((this as any).$route.params.manid == (this as any).loginMsg.id) {
                        return false
                    } else {
                        if (item.id != (this as any).loginMsg.id) {
                            return true
                        }
                    }
                }
            }
        }
    },
    watch: {
        dialogVisible(data: boolean) {
            if (!data) {
                ;(this as any).form = {
                    projectId: '', // 项目名称
                    planName: '', // 需求（任务）名称
                    principalId: '', // 负责人id
                    expectFinishDate: '', // 预期完成时间
                    planType: '', // 任务类型
                    planPriority: '', // 任务优先级
                    planContent: '' // 需求描述
                }
            }
        }
    },
    methods: {
        handleClick(row: any) {
            console.log(row)
        },
        handleClose() {
            ;(this as any).dialogVisible = false
        },
        openMask() {
            ;(this as any).dialogVisible = true
        },
        queryTask() {
            ;(this as any).$request.get('/api/oa/plan/list', (this as any).queryData).then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).pageData = res.data
                }
            })
        },
        queryPorjectList() {
            ;(this as any).$request.get('/api/oa/project/findProjectName').then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).porjectData = res.data
                    ;(this as any).queryTask()
                }
            })
        },
        paginaClick(val: string | number) {
            ;(this as any).queryData.page = val
            ;(this as any).queryTask()
        },
        // 获取用户列表
        getUserList(): void {
            ;(this as any).$request.get('/api/oa/users/list').then((res: any) => {
                if (res.code == 200) {
                    ;(this as any).userList = res.data
                    // this.userValue = (this as any).userList[0].id
                }
            })
        },
        createTask() {
            const that: any = this
            if (that.form.planName == '') {
                that.$message.error('需求名称不能为空！')
                return
            }
            if (that.form.principalId == '') {
                that.$message.error('请选择负责人！')
                return
            }
            if (that.form.expectFinishDate == '') {
                that.$message.error('请选择完成时间！')
                return
            }
            if (that.form.planType == '') {
                that.$message.error('请选择任务类型！')
                return
            }
            if (that.form.planPriority == '') {
                that.$message.error('请选择优先级！')
                return
            }
            that.$request.postJson('/api/oa/plan/save', that.form).then((res: any) => {
                if (res.code == 200) {
                    // ;(this as any).queryData.page = 1
                    that.queryTask()
                    that.$message.success('新增成功')
                    that.dialogVisible = false
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.pageHeader {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    .pageNameBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        img {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }
        .pageName {
            color: #4064e1;
        }
    }
    .pageStatistics {
        font-size: 12px;
        color: #999999;
        margin-left: 20px;
    }
}
.detailsBox {
    width: 100%;
    background: #ffffff;
    padding: 20px;
    .detailsTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: 25px;
        .detailsText {
            font-weight: 600;
        }
    }
}
.formSelectBox {
    width: 100%;
}
</style>
<style>
.detailsBox .elTableStyle {
    color: #333333;
}
.detailsBox .elTableStyle th {
    background: #f5f5f5;
    text-align: center;
}
.detailsBox table tr td .cell {
    text-align: center !important;
}
</style>
